CSS selectors allow us to choose specific elements and apply styles to them. Suppose we want to add a custom style to only a specific tag(s). There, We can make use of CSS selector.
There are different types of CSS selectors, which are as follows:
Universal selector represented by "*" targets all the HTML elements on the page.
What it does: Selects all elements on the webpage.
Usage: Useful for applying a basic style to everything.
The syntax of Universal Selector is as follows:
* { property : value; }<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Universal Selector</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div> <h1>HI, THIS IS PRASHANT SAINI</h1> <p>I'm a upcoming developer</p> </div> <span> <h1>HI, If you are here so you are on right platform.</h1> <p>Welocme back hero!!</p> <p>So, As you see this page here i applied "Universal Selector (*)" properties which are applicable for all the body in html page.</p> </span> </body> </html>* { margin: 0; padding: 0; background-color: rebeccapurple; color: yellowgreen; font-family: Arial, sans-serif; text-align: center; margin: 50px; }
Note: Irrespective of the tag, the style will be applied to all the elements and tags.
The element selector selects the target element based on the specific type. Suppose you want to underline all the <p> tags; in this case, the element selector will be the best choice.
What it does: Selects all elements of a specific type.
Usage: Targets tags directly (like paragraphs or headings).
The syntax of Element Selector is as follows:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Element Selector (Type Selector)</title> <link rel="stylesheet" href="./style.css"> </head> <body> <h1>HI, THIS IS PRASHANT SAINI</h1> <p>I'm a upcoming developer</p> <h2>HI, If you are here so you are on right platform.</h2> <p>Welocme back hero!!</p> <h3>I'm also a Software Developer and learning or enhancing my skills everyday.</h3> <h4>So, Why we use different different headings in this html page because we target specific element or targets tags directly (like paragraphs or headings)</h4> <p>So, As you see this page here i applied <strong>Element Selector (Type Selector) <mark>(e.g., p, h1, div)</mark></strong> properties which are applicable for those elements in the stylesheet.</p> </body> </html>h1 { color: blueviolet; background-color: red; } h2 { color: orange; background-color: green; } h3 { color: yellow; background-color: blue; } h4 { color: pink; background-color: black; } p { color: darkcyan; text-align: center; background-color: yellow; font-size: 20px; }
Note: Element selector is not recommended as the same tag can be used multiple times in the document. So, overlapping rules can occur in the stylesheet.
The class selector does the same job as the id selector; a class selector helps group various types of elements. Suppose we want to give a custom style to a specific group of elements. In this case, the class selector is the best option.
It is written with the period "." character followed by the class name in the style sheet.
What it does: Targets elements with a specific class.
Usage: Add class="name" to an element, then style it using .name.
The syntax of Class Selector is as follows:
Hey there, Actually I did not put code here because as we move to other Selectors the html css code will consume too much space—that’s why if you want to see the syntax of Class Selector you can click on the link below.
Note: The class selector helps in grouping two or more elements.
The ID selector targets elements based on the specific ID. It is written with the hash “#” character followed by the ID name in the style sheet.
What it does: Selects a specific element with a unique ID.
Usage: Add id="name" to an element, then style it using #name.
The syntax of ID Selector is as follows:
Hey there, Actually I did not put code here because as we move to other Selectors the html css code will consume too much space—that’s why if you want to see the syntax of ID Selector you can click on the link below.
Note: In the style block, the selector #title, will only target the HTML element having an ID of "title".
The group selector is used to minimize the code. Commas "," are used to separate each selector in a grouping. This reduces the number of lines of code, and the code looks cleaner.
It is written with the comma "," character followed by each element, tag, class, or ID in the stylesheet.
What it does: Styles multiple elements at once.
Usage: Separate selectors with a comma.
The syntax of Group Selector is as follows:
Hey there, Actually I did not put code here because as we move to other Selectors the html css code will consume too much space—that’s why if you want to see the syntax of Group Selector you can click on the link below.
Note: In the style block, the group selector (e.g., h1, p, .classname), will target any element, tag, class, ID, etc., in CSS.
The Attribute Selector is used to style HTML elements based on their attributes and values. It helps target specific elements with certain attributes, like type, href, or src.
It is written in square brackets "[ ]" in the stylesheet, followed by the attribute and its value (if needed).
What it does: Targets elements based on their attributes.
Usage: Style specific input types or elements with specific attributes.
Saves time: No need to write extra classes for styling.
Flexible: Targets elements with specific properties like type, href, src, etc.
Clean code: Keeps HTML simple and easy to read.
The syntax of Attribute Selector is as follows:
Hey there, Actually I did not put code here because as we move to other Selectors the html css code will consume too much space—that’s why if you want to see the syntax of Attribute Selector you can click on the link below.
Note: The attribute selector (e.g., [type="text"]) will target any element with (e.g., [type="text"]) in CSS.
The Child Selector is used to style direct children of an element. It only selects the first level of children, not nested elements deeper inside.
It is written using the ">" symbol between the parent and child in the stylesheet.
What it does: Targets only the direct child elements of a parent.
Usage: Style elements that are directly inside a parent container.
Precise styling: Focuses only on immediate children, avoiding deeper levels.
Better control: Useful when you don’t want to style nested elements.
Clean code: Keeps styles specific and avoids conflicts.
The syntax of Child Selector is as follows:
Hey there, Actually I did not put code here because as we move to other Selectors the html css code will consume too much space—that’s why if you want to see the syntax of Child Selector you can click on the link below.
Note: The Child selector (element > child) will not affect any nested elements inside the child.
The Descendant Selector is used to style all elements inside a parent, no matter how deeply nested they are.
It is written by simply putting a "space" between the parent and the target in the stylesheet.
What it does: Targets all matching elements inside the specified parent.
Usage: Style all nested elements within a parent container.
Broad styling: Affects all matching elements within the parent.
Flexible: Can target deeply nested elements without adding classes.
Saves time: Reduces the need for multiple individual selectors.
The syntax of Descendant Selector is as follows:
Hey there, Actually I did not put code here because as we move to other Selectors the html css code will consume too much space—that’s why if you want to see the syntax of Descendant Selector you can click on the link below.
Note: The Descendant selector (ancestor descendant) will style every matching element inside the specified parent, even if they are deeply nested.
The Pseudo-classes are used to style elements in a specific state or position.
It is written with a colon ":" followed by the pseudo-class name.
What it does: Applies styles based on an element's state or position (e.g., when a user hovers over it or it's the first child).
Usage: Style elements based on interactions or structure.
Interactive designs: React to user actions like hovering or focusing.
Specific targeting: Style elements based on their position (e.g., first or last child).
Clean code: Avoids adding extra classes or IDs for specific states.
:hover: Styles an element when hovered over.
:first-child: Styles the first child of a parent.
:last-child: Styles the last child of a parent.
The syntax of Pseudo-classes is as follows:
Hey there, Actually I did not put code here because as we move to other Selectors the html css code will consume too much space—that’s why if you want to see the syntax of Pseudo-classes you can click on the link below.
Note: Pseudo-classes like :hover or :first-child help make designs more dynamic and user-friendly.
The Pseudo-elements are used to style specific parts of an element, such as adding extra content or styling the first letter.
It is written with double colons "::" followed by the pseudo-element name.
What it does: Targets and styles specific parts of an element.
Usage: Add decorative content or style specific parts of text (e.g., the first letter).
Add content: Insert text or icons without modifying the HTML.
Precise styling: Style specific parts like the first letter or line.
Creative designs: Adds visual effects without extra elements.
::before: Adds content before the element.
::after: Adds content after the element.
The syntax of Pseudo-elements is as follows:
Hey there, Actually I did not put code here because as we move to other Selectors the html css code will consume too much space—that’s why if you want to see the syntax of Pseudo-elements you can click on the link below.
Note: Pseudo-elements like ::before or ::after are great for adding decorative content or improving designs.